<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
			position: relative;
			border: 1px solid #000;
			height: 50px;
			width: 590px;
			margin: 200px auto;
		}
        #bg {
			position: absolute;
			top: 0;
			left: 0;
			height: 50px;
			width: 0px;
			background: rgb(140, 226, 223);
		}
        span {
			width: 50px;
			height: 50px;
			font-size: 28px; line-height: 50px;
			text-align: center;
			position: absolute;
			top: 0;
		}
    </style>
    <script>
        //obj客体 attr属性 step步骤  frequency频率/次数 target目标 endFn结束函数
        function getStyle(obj, attr){
			return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
		}
        function move(obj,attr,step,count,target,endFn){
            clearInterval(obj.timer);
            step = parseInt(getStyle(obj,attr)) < target ? step : - step;
            obj.timer = setInterval(function(){
                var replace = parseInt(getStyle(obj,attr)) + step; //位移
                if(step>0 && replace > target || step < 0 && replace < target){
                    replace = target;
                }
                obj.style[attr] = replace + 'px';
                if(replace == target){
                    clearInterval(obj.timer);
                    endFn && endFn();
                }
            },count);
        }
        function opacity(obj,step,target,count,endFn){
            var nowOpacity = getStyle(obj,'opacity') * 100;
            step = nowOpacity < target ? step : -step;
            //清除obj初始化属性
            clearInterval(obj.alpha);
            obj.alpha = setInterval(function(){
                nowOpacity = getStyle(obj,'opacity') * 100;
                var nextOpacity = nowOpacity + step;
                if(step > 0 && nextOpacity > target || step < 0 && nextOpacity < target){
                    nextOpacity = target;
                }
                obj.style.opacity = nextOpacity/100;
                obj.style.filter = 'alpha(opacity:' + nextOpacity + ')';
                if(nextOpacity == target){
                    clearInterval(obj.alpha);
                    endFn && endFn();
                }
            },count);
        }
        window.onload = function(){
                var box = document.getElementById("box"),
                    bg = document.getElementById("bg"),
                    spans = box.getElementsByTagName("span"),
                    num = 0,
                    timer = null;
                    for(var i = 0; i < 10; i++){
                        spans[i].style.left = 60 * i + 'px';
                    }
                  
                    box.onclick = function(){
                        move(bg,'width',50,90,590);
                        opacity(bg,10,0,200);
                        clearInterval(timer);
                        timer = setInterval(function(){
                            move(spans[num],'top',20,100,-500);
                            opacity(spans[num],20,0,200);
                            num++;
                            if(num == spans.length){
                                clearInterval(timer);
                            }
                        },200)
                    }
            }
    </script>
</head>
<body>
    <div id="box">
		<div id="bg"></div>
		<span>+1</span>
		<span>+1</span>
		<span>+1</span>
		<span>+1</span>
		<span>+1</span>
		<span>+1</span>
		<span>+1</span>
		<span>+1</span>
		<span>+1</span>
		<span>+1</span>		
	</div>
</body>
</html>